<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{{ title }}</title>
    <!-- Dependencies --> 
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></script>

	<!-- Drag and Drop source file --> 
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js" ></script>
	<style type="text/css">
	.dd-main
	{
		position:absolute;
		border:1px solid #EEEEE;
		text-align:center;
		color:#fff; 
		height:60px;
		width:60px;
	}
	.dd-main .dd-handle 
	{
    	background: #003366;
    	cursor:move;
	}
	#dd-video
	{
		/*background-color:#566F4E;*/
		top:180px; 
		left:25px;
	}
	#dd-ppt
	{
		top: 180px;
		left: 570px;
	}
	</style>
</head>
<body>
<h1>{{ title }}</h1>
<p>
	<span style="font-family:Verdana; font-size: 11px; color: blue;">
		Notice: Try "Drag Me" to comfort yourself. :-)
	</span>
</p>
<p><a href="/jstutorial/">[Go to List View]</a></p>
<div id="container">
<div id="dd-video" class="dd-main">
    <div id="dd-handle-video" class="dd-handle"><span>Drag Me</span></div>
    {{ src_video }}
</div>
<div id="dd-ppt" class="dd-main">
    <div id="dd-handle-ppt" class="dd-handle"><span>Drag Me</span></div>
    {{ src_ppt }}
</div>	
</div>
<script type="text/javascript">
(function() {
    var dd_video, dd_ppt;
    YAHOO.util.Event.onDOMReady(function() {
        dd_video = new YAHOO.util.DD("dd-video");
        dd_ppt = new YAHOO.util.DD("dd-ppt");
        
        dd_video.setHandleElId("dd-handle-video");
		dd_ppt.setHandleElId("dd-handle-ppt");
        });
})();

</script>
</body>
</html>
